$control-dataview: (
  text-color: getCssVar(color, text, 0),
  hover-bg-color: getCssVar(color, fill, 1),
  active-bg-color: getCssVar(color, fill, 2),
  padding: getCssVar(spacing, tight) getCssVar(spacing, base) 0,
  page-height: 50px,
);

$control-dataview-group-item-header: (
  'bg-color': transparent,
  'padding': getCssVar(spacing, base, tight),
  'border-color': getCssVar('color', 'border'),
);

$control-dataview-group-item-caption: (
  'text-color': getCssVar(color, text, 0),
  'font-size': getCssVar('font-size', 'header-5'),
  'font-weight': getCssVar(font-weight, bold),
);

$control-dataview-group-item-content: (
  'bg-color': transparent,
  'padding': getCssVar(spacing, tight),
);

@include b(control-dataview) {
  @include set-component-css-var(control-dataview, $control-dataview);
  @include flex(column, flex-start, stretch);

  height: 100%;

  // 内容区样式
  @include e(content) {
    flex-grow: 1;
    height: 100%;
  }

  // 分页样式
  @include e(pagination) {
    flex-shrink: 0;
  }
}

@include b(control-dataview-scroll) {
  @include flex(row, null, null, wrap);

  &>*{
    margin:calc( getCssVar(spacing, base, tight) / 2 );
  }

  align-content: flex-start;
  padding: getCssVar(control-dataview, padding);
  overflow: auto;
}

@include b(control-dataview-item-col) {
  padding: 0 getCssVar(spacing, base, tight) getCssVar(spacing, base, tight) 0;
}

@include b(control-dataview-item) {
  @include set-component-css-var(control-dataview, $control-dataview);;

  color: getCssVar(control-dataview, text-color);
  cursor: pointer;

  &:hover {
    background-color: getCssVar(control-dataview, hover-bg-color);
  }

  @include when(active) {
    background-color: getCssVar(control-dataview, active-bg-color);
  }
}

@include b(control-dataview-item-content) {
  @include set-component-css-var(control-dataview, $control-dataview);

  @include e(top) {
    @include m(title) {
      text-align: center;
    }

    @include m(description) {
      min-width: 150px;
      text-align: justify;
      text-justify: newspaper;
      word-break: break-all;
    }
  }

  @include e(bottom) {
    @include m(actions) {
      display: flex;
      justify-content: center;
    }
  }
}

@include b(control-dataview-group-content) {
  @include set-component-css-var('control-dataview-group-item-header', $control-dataview-group-item-header);
  @include set-component-css-var('control-dataview-group-item-caption', $control-dataview-group-item-caption);
  @include set-component-css-var('control-dataview-group-item-content', $control-dataview-group-item-content);
  
  width: 100%;

  @include e(item) {
    .el-collapse-item__content {
      display: flex;
      flex-wrap: wrap;
    }

    @include m(empty) {
      width: 100%;
      text-align: center;
    }
  }
  
  @include e(item-header){
    @include flex(row, space-between, center);

    width: 100%;
    padding: getCssVar('control-dataview-group-item-header', 'padding');
    border-bottom: 1px solid getCssVar('control-dataview-group-item-header', 'border-color');
  }

  @include e(item-title) {
    @include utils-ellipsis;

    font-size: getCssVar('control-dataview-group-item-caption', 'font-size');
    font-weight: getCssVar('control-dataview-group-item-caption', 'font-weight');
    color: getCssVar('control-dataview-group-item-caption', 'text-color');
  }

  @include e(item-content) {
    display: flex;
    flex-wrap: wrap;
    padding: getCssVar('control-dataview-group-item-content', 'padding');
    background-color: getCssVar('control-dataview-group-item-content', 'bg-color');

    &>*{
      margin:calc( getCssVar(spacing, base, tight) / 2 );
    }
  }

  @include e(item-row) {
    padding: getCssVar('control-dataview-group-item-content', 'padding');
  }
  @include e(item-col) {
    padding: 0 getCssVar(spacing, base, tight) getCssVar(spacing, base, tight) 0;
  }
}
